import {  View, Text } from '@tarojs/components'
import { AtFloatLayout } from "taro-ui"
import { useEffect, useState } from 'react'
import $style from './index.module.scss'
import { strategyIsTime } from '../../../utils'

export default (props:{strategy:Strategy|undefined}) => {
    let strategy = props.strategy
    let [unitPrice, setunitPrice] = useState(0)
    let [strategyRules, setstrategyRules] = useState<any[]>([])
    let [strategyType, setstrategyType] = useState<string|number>('1')
    let [openChargeFeeDetail, setOpenChargeFeeDetail] = useState(false)

    useEffect(() => {
        if(strategy) {
            setunitPrice(strategy.unitPrice || 0)
            setstrategyType(strategy.strategyType) //设置策略类型
            if(strategy.rules) {
                setstrategyRules(strategy.rules)
            }
        }
    }, [strategy])

    


    return <>
        <View className={$style.row + ' f-32'}>
            <View style='flex:1'>收费标准：{unitPrice}元/{strategyIsTime(strategyType) ? '小时' : '度'}</View>
            <Text style='text-decoration: underline;' className='color-primary' onClick={() => { setOpenChargeFeeDetail(true) }}>点击查看计费详情</Text>
        </View>

        <AtFloatLayout isOpened={openChargeFeeDetail} title='计费标准' onClose={() => { setOpenChargeFeeDetail(false) }}>
            <View>
                <View className='chargeFee'>
                    {
                        strategyRules.map(rule => <View>{rule.amount}元/{strategyIsTime(strategyType) ? '小时' : '度'} （{rule.min}W-{rule.max}W）</View>)
                    }
                </View>
                {strategy && strategy.remark &&
                    <View className='p-l-r m-t-30'>
                        <View className='f-32 color-bd1c1c'>提示：</View>
                        <View className='color-999 f-24 text-justify m-t-20'>{strategy.remark}</View>
                    </View>
                }
                
            </View>
        </AtFloatLayout>
    </>
}